<template>
  <div class="all">
    <div id="china" class="echarts-demo1"></div>
    <h1>{{username.name}}</h1>
  </div>
</template>

<script setup lang="ts">
//添加一个dom元素
import { onMounted } from 'vue';
import * as echarts from 'echarts'//echarts5
import '../../assets/China'
import { Console } from 'console';
import { useTestStore } from '../../store';

const username=useTestStore()
onMounted(() => {
  const charts = echarts.init(document.querySelector('#china') as HTMLElement)
 console.log(document.querySelectorAll('#china') )
  var data = [
    {
      name: "内蒙古",
      itemStyle: {
        areaColor: "rgba(207, 202, 206, 1)",
      },
      value: [110.3467, 41.4899]
    },
  ];
  charts.setOption(
    {

      geo: {
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"],
        layoutSize: "120%",
        itemStyle: {
          //    normal: {
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 1200,
            x2: 1000,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#152E6E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0673AD", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          shadowColor: "rgba(90, 98, 209, 1)",
          shadowOffsetX: 0,
          shadowOffsetY: 15,
          opacity: 0.5,
          //  },

        },
        emphasis: {
          areaColor: "#0f5d9d",
        },


        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",
              borderColor: "rgba(0, 10, 52, 1)",
              // normal: {
              opacity: 0,
              label: {
                show: false,
                color: "#009cc9",
              },
              //},
            },
            label: {
              show: false,
              color: "#FFFFFF",
              fontSize: 12,
            },
          },
        ],
      },
      series: [
        {
          type: "map",
          selectedMode: "multiple",
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "120%",
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },
          label: {
            //显示省份名称
            show: false,
            color: "#FFFFFF",
            
            fontSize: 16,
          },
          itemStyle: {
            // normal: {
            areaColor: "rgba(207, 202, 206, 1)",
            borderColor: "rgba(46, 14, 140, 1)",
            borderWidth: 1.8,
            //},
            emphasis: {
              areaColor: "rgba(126, 98, 209, 1)",
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          data: data,
        },
        {
     
          type: 'scatter',
          //使用地理坐标
          coordinateSystem: 'geo',
          //   symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
          // symbolSize: [30,120],
          // symbolOffset:[0, '-40%'] ,
          symbol:'pin',
          symbolSize:[45,45],
          label: {
            //normal: {
            // show: true,
            //}
          },
          itemStyle: {
            //normal: {
            color: 'rgba( 180, 14, 1)', //标志颜色
            //}
          },
          data: data,

        },
      ],
    }
  )
})

</script>

<style scoped>
.all {
  margin: 0;
 
  display: flex;
    overflow: auto;
    height: 100vh;
background: radial-gradient( 87.02% 95.72%, rgba(19, 18, 20, 1) 8%, rgba(2, 18, 70, 41) 19.75%, rgba(27, 69, 133, 71) 47.28%, rgba(66, 85, 117, 3) 60.24%, rgba(94, 103, 117, 1) 72.17%, rgba(26, 44, 71, 1) 85.25%, rgba(58, 88, 133, 1) 102%, rgba(11, 80, 140, 1) 99% );

}
.echarts-demo1 {
  position: absolute;
  width: 900px;
  height: 700px;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
</style>